<style>
  .el-table .warning-row{
    background: oldlace;
  }

  .el-table .success-row{
    background: #f0f9eb;
  }

  .zhu {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border: 1px solid #00F
  }

  .zuo {
    float: left;
    width: 40%;
    height: 49.9%;
    border-right: 1px solid #00F
  }

  .you {
    float: right;
    width: 59.8%;
    height: 49.9%;
    border-left: 1px solid #00F
  }

  .head {
    float: right;
    width: 76.5%
  }
</style>
<template>
  <!--未选课表-->
  <div style="width: 100%" class="zhu">
    <div id="CouDiv" class="you">
      <div class="head">
        <el-input v-model="tableDataName" placeholder="请输入关键字" style="width:240px" @keyup.enter=""/>
        <el-button type="primary" @click="" icon="el-icon-search">搜索</el-button>
        <el-button @click="selected" type="success">展示已选课</el-button>
      </div>
      <el-table
        align="center"
        :data="this.$store.state.StuNoSeleData"
        border>
        <el-table-column
          prop="CouId"
          label="编号"
          width="120">
        </el-table-column>
        <el-table-column
          align="center"
          prop="CouName"
          label="课名"
          width="120">
        </el-table-column>
        <el-table-column
          align="center"
          prop="state"
          label="状态"
          width="1">
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button v-if="scope.row.state==false"  @click="getXuanke(scope.row)" type="primary" round size="small">选课</el-button>
            <el-button v-else @click="CanclCou(scope.row)" type="danger" round size="small">退课</el-button>
          </template>

        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <!--handleSizeChange：表示每页记录的个数发生变化时触发的函数-->
        <!--handleCurrentChange：包含一个参数，表示每页显示几条记录-->
        <!--@current-change:页码发生变化时调用的函数，函数中包含一个参数，表示当前页-->
        <!--:current-page:当前页，表示当前页面上展示的是第几页-->
        <!--:page-sizes:分页选项，页面提供一个列表让你选择每页显示多少条记录-->
        <!--:page-size: 表示每页显示的记录数，即我们命名的pageSize-->
        <!--:total: 表示总记录数，即我们这个表格中一共要显示多少条数据-->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="this.$store.state.pageConf.pageCode"
          :page-sizes="this.$store.state.pageConf.pageOption"
          :page-size="this.$store.state.pageConf.pageSize"
          :total="this.$store.state.pageConf.totalPage">
        </el-pagination>
      </div>
    </div>
    <!--学生已选课表-->
    <div class="zuo" style="width: 40%">
      <el-table
        align="center"
        :data="this.$store.state.StuCous"
        border>
        <el-table-column
          align="center"
          prop="CouName"
          label="已选的课"
          width="120">
        </el-table-column>
        <el-table-column
          align="center"
          prop="state"
          label="状态"
          width="1">
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <!--删课按钮-->
            <el-button @click="deleCou(scope.row)" type="danger" plain icon="el-icon-delete" size="small" round/>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script>
  import {getCouList, StuChoice, StuDeleCou, UpStuCou} from '@/api/userApi' //导入接口工具
  export default {
    props: ["conData"],//应用父组件数据
    data() {
      return {
        tableDataBegin: [],
        tableDataName: "",
        tableDataEnd: [], //课表数据
        State:false,//选课状态

        //定义分页配置 pageConf
        pageConf: {
          //设置一些初始值(会被覆盖)
          pageCode: 1, //当前页
          pageSize: 4, //每页显示的记录数
          totalPage: 12, //总记录数（总条数）
          pageOption: [4, 8, 12], //分页选项
        },

        deleCouNane:null,//删课专用提示
         XKCouName:null,// 选课专用提示



      };

    },

    methods: {
      //条数 改变时触发的函数
      handleSizeChange(val) {
        console.log("当前条数：",val,"之前的条数：",this.$store.state.pageConf.pageSize)
        getCouList(this.$store.state.qxkStuId,this.$store.state.pageConf.pageCode,val).then(response => {
          const data = response.data//获取后台响应的原始数据
          this.$store.state.StuNoSeleData = data.data;//把课数据存入StuNoSeleData
          this.$store.state.pageConf.pageCode = data.pageNum//覆盖掉原有的当前页码
          this.$store.state.pageConf.pageSize= data.pageSize//覆盖掉原来的当前条数
          this.$store.state.pageConf.totalPage = data.total//覆盖掉原来的总跳数
          this.selected() //刷新已选的课
          //console.log("列表数据：",data.json.data.json)
          console.log("取出的页数：",data.pageNum)
          console.log("取出的条数：",data.pageSize)
          console.log("取出的总条数：",data.total)
          console.log("%c当前“条数”已变，当前“页数”不变", "color:green")

        })
      },
      //当前页改变时触发的函数
      handleCurrentChange(val) {
        console.log("当前页：",val,"之前页：",this.$store.state.pageConf.pageCode)
        console.log("当前条数",this.$store.state.pageConf.pageSize)
        getCouList(this.$store.state.qxkStuId,val,this.$store.state.pageConf.pageSize).then(response => {
          const data = response.data//获取后台响应的原始数据
          this.$store.state.StuNoSeleData = data.data;//把课数据存入StuNoSeleData
          this.$store.state.pageConf.pageCode = data.pageNum//覆盖掉原有的当前页码
        //  this.$store.state.pageConf.pageSize= data.json.pageSize//覆盖掉原来的当前条数
          this.$store.state.pageConf.totalPage = data.total//覆盖掉原来的总跳数
          this.selected() //刷新已选的课
          console.log("列表数据：",data.data)
          console.log("取出的页数：",data.pageNum)
          console.log("取出的条数：",data.pageSize)
          console.log("取出的总条数：",data.total)
          console.log("%c当前“条数”不变，当前“页数”已变", "color:green")

        })
      },


      /*事件消息*/
      XKSuccess() {
        this.$notify({
          title: '成功选了'+this.XKCouName+'课',
          type: 'success',
          duration: 1200
        });
      },
      DeleSuccess() {
        this.$notify({
          title: '已删除'+this.deleCouNane+'课',
          type: 'success',
          duration: 800,
          position: 'bottom-left'
        });
      },

      /*获取课表表*/
      getCtu2() {
        getCouList(this.$store.state.qxkStuId,this.$store.state.pageConf.pageCode,this.$store.state.pageConf.pageSize).then(response => {
          const data = response.data//获取后台响应的原始数据
          this.$store.state.StuNoSeleData = data.data;//把课数据存入StuNoSeleData
          this.pageConf.pageCode= data.pageNum//覆盖
          this.pageConf.pageSize= data.pageSize//覆盖
          this.pageConf.totalPage= data.total//覆盖
           this.$store.state.StuNoSeleData = data.data;//把课数据存入StuNoSeleData
          this.$store.state.pageConf.pageCode = data.pageNum//覆盖掉原有的当前页码
            this.$store.state.pageConf.pageSize= data.pageSize//覆盖掉原来的当前条数
            this.$store.state.pageConf.totalPage = data.total//覆盖掉原来的总跳数
          console.log("%c课程列表刷新了", "color:blue","数据是 ：", data.data)
        })
      },

      /*退课*/
      CanclCou(Studata) {
        this.deleCouNane=Studata.CouName //赋值给提示
        console.log("退课前的Cid是：",Studata.cid)
        console.log("退课前的Sid是：",this.$store.state.qxkStuId)
        console.log("退课前的状态是：",Studata.state)
        var couid = Studata.CouId//必须这样定义才能拿到数据
        var state = Studata.state//此时的状态
        StuDeleCou(this.$store.state.qxkStuId, couid).then(response => {
          const data = response.data
          console.log("退课后的Cid是：",data.cid)
          console.log("退课后的sid是：",data.sid)
          console.log("退课后的状态是：",data.state)//打印true
          this.getCtu2()//刷新课表
          this.selected() //刷新已选的课
          this.DeleSuccess()//成功提示
        }).catch(error => {
        })
      },
      /*学生删除课程*/
      deleCou(r) {
        this.deleCouNane=r.CouName //赋值给提示
        console.log("删课前的Cid是：",r.CouId)
        console.log("删课前的Sid是：",this.$store.state.qxkStuId)
        console.log("删课前的状态是：",r.state)
        StuDeleCou(this.$store.state.qxkStuId, r.CouId).then(response => {
          const data = response.data
          console.log("删课后的Cid是：",data.cid)
          console.log("删课后的id是：",data.sid)
          this.selected() //刷新已选的课
          this.getCtu2()//刷新课表
          this.DeleSuccess()//成功提示
        }).catch(error => {
        })
      },

      /*刷新已选表*/
      selected() {
        console.log("%c已选课刷新了", "color:green")
        UpStuCou(this.$store.state.qxkStuId).then(response => {
          const data = response.data
          this.$store.state.StuCous = data.data  //已选的课的数据，覆盖vuex中StuCous变量
        }).catch(error => {
        })

      },

      //选课方法
      getXuanke(Studata) {
       this.XKCouName= Studata.CouName//赋值给提示
        var couid = Studata.CouId//获取cid
        var state = Studata.state//此时的状态
         console.log("选课前的Sid:",this.$store.state.qxkStuId)
         console.log("选课前的Cid",couid)
        console.log("选课前的状态：",Studata.state)
        this.$store.state.couId = couid//实时课程id的起点
        StuChoice(couid, this.$store.state.qxkStuId).then(response => {
          const data = response.data//选课成功后返回来的数据
          console.log("选课后的cid是：",data.cid)
          console.log("选课后的sid是：",data.sid)
          console.log("选课后的状态是：",data.state)//打印true
          this.getCtu2()//刷新课表
          this.XKSuccess()
          this.selected()//选课成功后刷新“已选”方法

        }).catch(error => {
        })


      },
    },
    mounted: function () {//vue对象创建之后，即刻调用该方法
    }
  };
</script>


